<template>
  <view class="navbar-0">
    <div class="navbar-1">
      <!-- 左侧Logo -->
      <view class="logo">
        周读
      </view>
      <!-- 中间搜索框区域 -->
      <view class="search-container">
        <input 
          class="search-input" 
          placeholder="请输入关键词" 
          v-model="inputKeyword" 
          @confirm="handleSearch"
        />
        <button class="search-btn" @click="handleSearch">
          搜索
        </button>

        <!-- 子组件：数据列表，通过 ref 获取实例 -->
        <!-- <template>
            <common-list ref="commonListRef" />
        </template> -->
      </view>
      <!-- 右侧导航链接 -->
      <view class="nav-links">
        <navigator url="/pages/index/index" class="nav-link">
          首页
        </navigator>
        <navigator url="/pages/index/book-category" class="nav-link">
          书籍分类
        </navigator>
        <navigator url="/pages/admin/login" class="nav-link">
          后台登录
        </navigator>
      </view>
    </div>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// import commonList from '@/pages/index/common-list.vue';
// const commonListRef = ref(null);

import { useStore } from 'vuex'; // 引入 Vuex

const inputKeyword = ref('');
const store = useStore(); // 获取 Vuex Store 实例

// 3. 搜索事件处理函数
const handleSearch = () => {
  // if (inputKeyword.value.trim()) {
    // 现在 store 已正确获取，可调用 commit
    store.commit('setSearchKeyword', inputKeyword.value.trim());
    // inputKeyword.value = '';
  // }
};
</script>

<style scoped lang="scss">
    @use './nav-bar.scss'; 
</style>
